import streamlit as st
import time

# 添加自定义CSS样式，确保页面布局为 Flexbox 并设置子元素位置
st.markdown("""
<style>
    /* 创建一个可滚动的容器 */
    .scrollable-container {
        max-height: 300px; /* 设置最大高度 */
        overflow-y: auto; /* 允许垂直滚动 */
        border: 1px solid #ddd;
        padding: 1rem;
        margin-bottom: 1rem;
    }
</style>
""", unsafe_allow_html=True)

# 创建一个用于放置主要内容的容器
with st.container():
    st.title("Scrollable Container Example")

    # 创建一个可滚动的容器
    scrollable_container = st.empty()
    with scrollable_container.container():
        st.markdown('<div class="scrollable-container">', unsafe_allow_html=True)

        # 模拟一些内容，让页面变长
        for i in range(20):
            st.write(f"Content block {i}")

        st.markdown('</div>', unsafe_allow_html=True)

    # 使用 JavaScript 自动滚动到底部
    scroll_js = """
    <script>
        var container = window.parent.document.querySelector('.scrollable-container');
        if (container) {
            container.scrollTop = container.scrollHeight;
        }
    </script>
    """
    st.markdown(scroll_js, unsafe_allow_html=True)

# 模拟动态添加新内容并滚动到底部
if st.button('Add New Content'):
    with scrollable_container.container():
        st.markdown('<div class="scrollable-container">', unsafe_allow_html=True)

        # 模拟一些内容，让页面变长
        for i in range(20, 30):  # 新增内容
            st.write(f"New content block {i}")

        st.markdown('</div>', unsafe_allow_html=True)

    # 再次使用 JavaScript 自动滚动到底部
    st.markdown(scroll_js, unsafe_allow_html=True)
